<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Layer Visibility</title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q" type="text/javascript">
        </script>
        <script type="text/javascript">
         document.write('<script type="text/javascript" src="../src/arcgislink'+(document.location.search.indexOf('packed')>-1?'_packed':'')+'.js"><'+'/script>');
        </script>
        <script type="text/javascript">
        var ov;
        function init(){
          var type=new ArcGISMapType([new ArcGISTileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer')]);//
          GEvent.addListener(type,'load', function(){
            var map = new GMap2(document.getElementById("map"), {
              mapTypes: [type]
            });
            map.setCenter(new GLatLng(40,-95), 4);
            
            map.addControl(new GMapTypeControl());
            map.addControl(new GLargeMapControl());
            map.addControl(new GScaleControl());
            map.enableDoubleClickZoom();
            map.enableContinuousZoom();
            map.enableScrollWheelZoom();
            
            var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer';
            ov=new ArcGISMapOverlay(url,{opacity:0.5});
            GEvent.addListener(ov,'load', function(){
              map.addOverlay(ov);
              var service=ov.getMapService();
              var toc='';
              var layers=service.getLayers();
              for (var i=0; i< layers.length; i++){
                toc+='<input type="checkbox" id="layer'+layers[i].id+'"';
                if (layers[i].visible) toc+=' checked="checked"';
                toc+=' onclick="setVis()">'+layers[i].name+'<br/>';
              }
              document.getElementById('toc').innerHTML=toc;
            })
            
      
           
          });
        }
        function setVis(){
          var service = ov.getMapService();
          var layers = service.getLayers();
          for (var i = 0; i < layers.length; i++) {
            var el=document.getElementById('layer'+layers[i].id);
            layers[i].visible=(el.checked===true);
          }
          ov.refresh();
        }
        </script>
    </head>
    <body onload="init()">
       <a href='../docs/examples.html'>More examples</a> | Use
       <a href='?packed'>Packed </a> | 
       <a href='?'> Unpacked</a> Version of the script.
       <br/>
       <br/>Use Check box to turn on/off layers in a dynamic map service.
       <table>
         <tr>
           <td valign="top"><div id="toc" style="width:130px;"></div></td>
           <td><div id="map" style="width:800px; height:400px; border:1px solid #000;">
        </div></td>
         </tr>
       </table>
        
    </body>
</html>
